<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchConfig"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesMaterialRequisitionTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer :isLoading="isLoading" v-model="formDataDialog" v-bind="formDescDialog" :request-fn="handleSubmit" :visible.sync="visible" :title="title"> </ele-form-drawer>
  </div>
</template>

<script>
import { operateList, searchConfig, formDescDialog, rowConfig } from './config'
import { getList, rowCreate, rowUpdate, rowDel, getInfo, getOrderTypeList, getOrderStatusList, getCurrentWarehouseCode } from '@/api/materialRequisition/mesMaterialRequisition'

export default {
  name: 'mesMaterialRequisition',
  data() {
    return {
      title: null,
      visible: false,
      isLoading: false,
      loading: false,
      formDataDialog: {},
      formDescDialog, //新增修改框
      searchConfig,
      operateList,
      getList,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "factoryCode",
        //   label: "工厂编码",
        //   width: 100,
        //   fixed: "left",
        // },
        // {
        //   prop: "warehouseCode",
        //   label: "仓库",
        //   width: 120,
        //   optionProp: {
        //     value: "modelingCode",
        //     label: "modelingName",
        //   },
        //   option: async (data) => {
        //     const list = await getCurrentWarehouseCode();
        //     return list.data.result;
        //   },
        //   fixed: "left",
        // },
        {
          prop: 'orderNo',
          label: $i18n.t('mesMaterialRequisition.orderNo'),
          width: 190,
          showOverflowTooltip: true,
          render: (h, scope) => {
            return (
              <el-link type="primary"
                onClick={() => {
                  this.goChild({ orderNo: scope.row.orderNo })
                }}>
                {scope.row.orderNo}
              </el-link>
            )
          },
          fixed: 'left'
        },
        {
          prop: 'prdOrder',
          label: $i18n.t('mesMaterialRequisition.productOrderCode'),
          width: 180,
          showOverflowTooltip: true
        },
        // {
        //   prop: 'barcode',
        //   label: '产品唯一码',
        //   width: 230,
        //   showOverflowTooltip: true
        // },
        {
          prop: 'orderType',
          label: $i18n.t('mesMaterialRequisition.orderType'),
          width: 130,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getOrderTypeList()
            console.log('order:' + list.data.result)
            return list.data.result
          }
        },
        {
          prop: 'orderStatus',
          label: $i18n.t('mesMaterialRequisition.orderStatus'),
          width: 120,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getOrderStatusList()
            return list.data.result
          }
        },
        {
          prop: 'goodsCode',
          label: $i18n.t('mesMaterialRequisition.materialCode'),
          width: 160,
          showOverflowTooltip: true
        },
        {
          prop: 'goodsName',
          label: $i18n.t('mesMaterialRequisition.materialName'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'batchNo',
          label: $i18n.t('mesMaterialRequisition.batchNo'),
          width: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'planAmount',
          label: $i18n.t('mesMaterialRequisition.planAmount'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'realAmount',
          label: $i18n.t('mesMaterialRequisition.realAmount'),
          width: 100,
          showOverflowTooltip: true
        },
        {
          prop: 'unit',
          minWidth: 120,
          label: $i18n.t('mesMaterialRequisition.measureUnit'),
          showOverflowTooltip: true
        },
        {
          prop: 'unitCode',
          label: $i18n.t('mesMaterialRequisition.measureUnitCode'),
          width: 160,
          showOverflowTooltip: true
        },
        // {
        //   prop: "areaCode",
        //   label: "库区编码",
        //   width: 120,
        //   optionProp: {
        //     value: "areaCode",
        //     label: "areaDesc",
        //   },
        //   option: async (data) => {
        //     const list = await getAreaCodeList();
        //     return list.data.result;
        //   },
        // },
        // {
        //   prop: "locationCode",
        //   label: "库位编码",
        //   width: 120,
        // },
        // {
        //   prop: 'storeKeeper',
        //   label: '保管员'
        // },
        // {
        //   prop: 'storeKeeperName',
        //   label: '保管员名称',
        //   width: 130,
        //   showOverflowTooltip: true
        // },
        {
          prop: 'orderLine',
          label: $i18n.t('mesMaterialRequisition.orderLine'),
          width: 120,
          showOverflowTooltip: true
          // fixed: "left",
        },
        {
          prop: 'planTime',
          label: $i18n.t('mesMaterialRequisition.planTime'),
          width: 170,
          showOverflowTooltip: true
        },
        // {
        //   prop: 'waveOrderNo',
        //   label: '波次单号',
        //   width: 190,
        //   showOverflowTooltip: true
        //   // fixed: "left",
        // },
        // {
        //   prop: 'waveOrderLine',
        //   label: '波次行项目',
        //   width: 120
        //   // fixed: "left",
        // },
        // {
        //   prop: 'asignTime',
        //   label: '分配时间',
        //   width: 170
        // },
        // {
        //   prop: 'customerCode',
        //   label: '客户编码',
        //   width: 140,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'customerName',
        //   label: '客户名称',
        //   width: 140,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'requireLoc',
        //   label: '接收工位',
        //   width: 120,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'startTime',
        //   label: '开始时间',
        //   width: 170
        // },
        // {
        //   prop: 'endTime',
        //   label: '结束时间',
        //   width: 170
        // },
        // {
        //   prop: 'owner',
        //   label: '货主',
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: "remark",
        //   label: "备注",
        //   width: 180,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'createByName',
          label: $i18n.t('common.createByName'),
          width: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: $i18n.t('common.createTime'),
          width: 170,
          showOverflowTooltip: true
        },
        {
          prop: 'updateByName',
          label: $i18n.t('common.updateByName'),
          width: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'updateTime',
          label: $i18n.t('common.updateTime'),
          width: 170,
          showOverflowTooltip: true
        },
        {
          prop: 'operate',
          label: $i18n.t('common.operation'),
          width: 160,
          fixed: 'right',
          render: (h, scope) => {
            return <ele-row-operation scope={scope} rowConfig={rowConfig} onRowOperate={this.rowOperate}></ele-row-operation>
          }
        }
      ]
    }
  },
  computed: {},
  methods: {
    //表格顶部按钮操作事件
    handleOperateEvent({ handleName, name, rows }) {
      this.title = name
      const fnc = {
        // add: () => {
        //   this.changeMaster(false)
        //   this.formDataDialog = {}
        //   this.visible = true
        // },
        // delete: () => {
        //   this.$confirm("此操作将删除该领料单主表, 是否继续?", "提示", {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning"
        //   }).then(() => {
        //     const ids = rows.map((val) => val.id).join(",")
        //     this.rowDel(ids)
        //   })
        // }
      }
      fnc[handleName] && fnc[handleName]()
    },
    //表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        show: () => {
          // 查看详情，并打开界面
          this.editInfo(row.id, true)
        },
        edit: () => {
          // 修改详情，并打开界面
          this.editInfo(row.id, false)
        },
        multiAdd: () => {
          this.goMultiAdd({ id: row.id })
        }
      }
      fnc[handleName] && fnc[handleName]()
    },
    //弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      this.isLoading = true
      this.formDataDialog.id ? this.rowUpdate(data) : this.rowCreate(data)
    },
    //新增
    rowCreate(data) {
      rowCreate(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.addSuccess'))
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 修改详情
    editInfo(id, flag) {
      this.changeMaster(flag)
      this.loading = true
      getInfo(id)
        .then((res) => {
          this.formDataDialog = res.data.result
          this.visible = true
        })
        .finally(() => {
          this.loading = false
        })
    },
    //修改
    rowUpdate(data) {
      rowUpdate(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.editSuccess'))
          this.visible = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    //删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.delete'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    //跳转至子页面
    goChild(queryParam) {
      let pathParam = '/materialRequisition/mesMaterialRequisitionDetail'
      this.$router.push({ path: pathParam, query: queryParam })
    },
    // 跳转至批量新增页面
    goMultiAdd(queryParam) {
      let pathParam = '/materialRequisition/mesMaterialRequisitionAdd'
      this.$router.push({ path: pathParam, query: queryParam })
    },
    changeMaster(flag) {
      if (flag) {
        formDescDialog.disabled = true
        formDescDialog.isShowSubmitBtn = false
      } else {
        formDescDialog.disabled = false
        formDescDialog.isShowSubmitBtn = true
      }
    }
  }
}
</script>
